<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<link href="../../cssmui/mui.min.css" rel="stylesheet" />
		<link href="../../cssmui/mui.picker.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/icons-extra.css" />
		<link href="../../css/mylist.css" rel="stylesheet" />
		<link href="../../css/app.css" rel="stylesheet" />

		<script src="../../mui/mui.min.js"></script>
		<script src="../../mui/mui.picker.min.js"></script>
		<script src='../../js/jsondb.js'></script>
		<script src='../../js/map/mydict.js'></script>
		<script src="../../js/app.js"></script>
		<script src='../../js/template-web.js'></script>
		<script src="../../js/loadpicker.js"></script>
		<style type="text/css">
			.mui-bar-popover {
				width: 30%;
			}
			
			.mui-popover {
				height: 190px;
			}
		</style>

	</head>

	<body>

		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!--菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-right">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">

						<h4 style="margin: 10px;">搜索条件</h4>
						<hr>
						<form>
							<div style="margin: 10px;">
								<input type="text" class="mui-input-clear" name="contact" id="contact" extenddata="" value="" placeholder="选择交易方" />
								<input type="text" class="mui-input-clear" name="startdate" id="startdate" value="" placeholder="开始时间" />
								<input type="text" class="mui-input-clear" name="enddate" id="enddate" value="" placeholder="结束时间" />
							</div>
							<div style="margin: 10px;">
								<span id="offCanvasHide" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-left">关闭</span>
								<span id="clearsearchinput" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-left">清空</span>
								<span id="searchsubmit" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-right">查找</span>
							</div>
						</form>
					</div>
				</div>
			</aside>
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
					<a id="offCanvasShow" href="#" class="mui-icon-extra mui-icon-extra-filter mui-pull-right"></a>

					<h1 class="mui-title">收支情况</h1>
				</header>
				<div id="offCanvasContentScroll" style="margin-bottom:50px" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll ">
						<div class="mui-card  mui-card-content mui-media " id="infobtn">

							<div id="info_div" class="mui-card-content-inner mui-h5">
							</div>
							<div class="subscript">点 </div>
						</div>
						<ul class="mui-table-view">
						</ul>
					</div>
				</div>
				<nav class="mui-bar mui-bar-tab">
					<a href="chart" class="mui-tab-item ">
						<span class="mui-tab-label">图形</span>
					</a>
					<a href="kh" class="mui-tab-item  ">
						<span class="mui-tab-label">客户</span>
					</a>
					<a href="gys" class="mui-tab-item ">
						<span class="mui-tab-label">供应商</span>
					</a>
				</nav>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>

		<script src="../../js/myoffcanvas.js"></script>
		<script id="node_tpl" type="text/html">
			<li class="mui-table-view-cell " style="padding:4px; background-color: {{rowid%2==1?'#edffff':'#fbffff'}} ;" data-tag="{{idkey}}">
				<div class="mui-row">
					<div class="mui-table-cell mui-col-sm-6  mui-col-xs-6" style="padding-left: 5px;padding-top: 5px;">
						<p class="mui-ellipsis" style="color:#777777"> {{monnum}}</p>
						<span class="mui-ellipsis2 mui-h4" style="color:#777777">{{uname}}</span>
						
					</div>
					<div class="mui-table-cell mui-col-sm-6 mui-col-xs-6" style="padding-left: 5px;padding-top: 5px;">
						<p class="mui-ellipsis" style="color:#555555"> 月成交额：
							<span class="text-num text-size2">￥{{samout}}</span> {{if receivable>0}} <br>应收款：
							<span class="text-num-up text-size2">￥{{receivable}}</span>
							<br>月利润：<span class="text-num-up text-size2">￥{{profit}}</span> {{/if}} {{if payable>0}}<br> 应付款：
							<span class="text-num-down text-size2">￥{{payable}}</span> {{/if}}
						</p>
					</div>
					

				</div>
			</li>
		</script>
		<script id="card_tpl" type="text/html">
			<div class="mui-media-body">
				<p class='mui-ellipsis '>{{name}}</p>
			</div>
			{{dstr}}
			<br> 累计交易额：<span class="text-num text-size2">￥{{samout}}</span>
			<br> {{if pors==''||pors==1 }} 累计应付款：
			<span class="text-num-down text-size2">￥{{payable}}</span><br> {{/if}} {{if pors==''||pors==2 }} 累计利润：
			<span class="text-num-up text-size2">￥{{profit}}</span>
			<br> 累计应收款：<span class="text-num-up text-size2">￥{{receivable}}</span>
			<br> {{/if}}
		</script>
		<script type="text/javascript">
			/**
			 * 
			 */
			//--------表单属性
			var _PORS = "";
			var _statusname = '';
			//------------------声明 定义-------------
			var targetTab = ['echarts.html'];		
			var _tagtitle = null;
			//-----------初始化
			//app.js
			function afterPlusReady() {
				var self = _self;
				mui.init();
				setPors(self.pors);
			}

			mui.ready(function() {
				//---------------------事件-------------
				//------列表事件----------
				//点击单元格后弹出
				//				mui("#offCanvasContentScroll").on('tap', '.mui-table-view-cell', function() {
				//					var did = this.getAttribute("data-tag")
				//				
				//					open(targetTab[0], {
				//						selectedid: did,
				//						pors: _PORS
				//					});
				//				})
				//搜索条件改变后,明细返回后
				window.addEventListener('bechanged', function(e) {　 //获取参数值	
					//console.log('bechanged：'+e.detail.reload);					
					if(e.detail.reload == 'list') //更新明细列表
					{
						refresh();
					}
				});
				//........上拉事件...............
				window.addEventListener("swipeup", function() {
					//console.log("_flag" + _flag)
					if(_flag == 1) {
						pullRefresh()
						var scroll = mui('#offCanvasContentScroll').scroll();
						//重新计算布局值，最大滚动的高度等等
						scroll.reLayout();
						//滚动到底部
						scroll.scrollToBottom(100);
					}
					//console.log('swipeup')
				});
				var _flag = 0;
				//滚动后
				G('offCanvasContentScroll').addEventListener('scrollend', function(e) {
					//console.log(_flag + ' ' + e.detail.y + '  ' + e.detail.maxScrollY)
					_flag = 0;
					if(e.detail.y <= e.detail.maxScrollY) {
						_flag = 1
					}
				});
				//------------按钮事件--------------	
				mui("nav").on("tap", ".mui-tab-item", function() {
					var eventname = this.getAttribute("href")
					if(eventname == "gys") {
						setPors(1);
					} else if(eventname == "kh") {
						setPors(2);
					} else if (eventname == "chart"){
						open(targetTab[0], {							
							pors:_PORS						
						});
					}
				});
				//------------搜索表单事件--------------	
				G('offCanvasHide').addEventListener('tap', function() {
					document.activeElement.blur();
					offCanvasWrapper.offCanvas('close');
				});
				G('searchsubmit').addEventListener('tap', function(e) {
					refresh();
					document.activeElement.blur();
					offCanvasWrapper.offCanvas('close');
				});
				G('clearsearchinput').addEventListener('tap', function(e) {
					G('contact').value = ''
					G('contact').extenddata = ''
					G('startdate').value = ''
					G('enddate').value = ''
					document.activeElement.blur();
				});
				G('infobtn').addEventListener('tap', function(e) {
					t = this;
					if(t.style.height == "")
						t.style.height = "80px"
					else
						t.style.height = ""
				});
				//-------------监听事件----------
				//监听数据改变的事件,选择供应商以后会改变部分字段
				//console.log('244 iolist')
			});

			//多用途: 程序标签
			function setPors(p) {
				//console.log(p);
				_PORS = p;
				var _tagtitle = null;
				switch(_PORS) {
					case '1':
						_tagtitle = ['采购'];
						break;
					case '2':
						_tagtitle = ['销售'];
						break;
				}
				loaddict();
			
				refresh();
				//G('span_menu3').innerHTML=_statusname;
				if(_tagtitle)
					mui('header .mui-title')[0].innerHTML = _tagtitle[0] + '账单';
			}
			//----------载入字典--------------

			//搜索和关联用
			function loaddict() {
				var _tb_contacts = new XCDBHelp('tb_contacts');
				var qs = _tb_contacts.where({
					"status": 1,
					"cgroup": _PORS
				}).getList();
				//log(qs, 'purchase_list201')
				var data = _AW.select(qs, 'uname:text,_idkey:value,pysx:py,cgroup:cg')
				if(data == null) return;	
				//log(data, 'purchase_list205')
				loadPicker('contact', data);
				//	alert('ddd')
				loadDateTimePicker('startdate', 'month')
				loadDateTimePicker('enddate', 'month')

			}

			
			//----------------------载入数据-----------------------
			//----------数据转模版-----------
			function dataToHtml(row) {
				if(!_IS.isMap(row)) return;
				return template('node_tpl', row);
			}

			//------------加载查询结果---------
			function pullRefresh(qrs) {
				if(qrs == null) return;
				var table = document.body.querySelector('.mui-table-view');
				var i = table.children.length
				//console.log('订单1:' + table.children.length)
				//console.log('订单2:' + qrs.length)
				var j = i + PAGESIZE;
				var len = (j < qrs.length) ? j : qrs.length;
				//console.log(i+','+PAGESIZE+' ,'+j+' ,' +len)
				for(; i < len; i++) {
					//	console.log(JSON.stringify(qrs[i]))
					k = qrs.length - 1 - i;
					//var li = dataToHtml(i, qrs[k]);
					//table.appendChild(li);
					qrs[k].rowid = k;
					//console.log(JSON.stringify(qrs[k]))
					table.innerHTML += dataToHtml(qrs[k]);
				}
				if(len == qrs.length)
					mui.toast("以上是全部单据")
				return len
			}
			
			//---------------查询语句-------------		
			function queryList() {
			
				var q2 = _FF.getV('startdate').replaceAll('-', '')
				var q3 = _FF.getV('enddate').replaceAll('-', '');
				var where = {					
					"monnum[": q2,
					"monnum]": q3
				};
				//log(wheres, 'purchaselist273')
				//console.log(JSON.stringify(wheres))
				//console.log('arr.lengh'+arr.length)
				var arr1 =queryBTA(where);		
			
				setCard(arr2);
				return arr2;
			}

			function setCard(arr) {
				var cnt = {
					name: '',
					dstr: '',
					receivable: 0,
					payable: 0,
					profit: 0,
					samout: 0
				}
				cnt.pors = _PORS || '';
				var mans = [];
				var monnum1 = '';
				var monnum2 = '';
				//console.log("学习型:"+JSON.stringify(arr))
				for(var i = 0; i < arr.length; i++) {
					var m = arr[i];
					///console.log(arr.length+' '+JSON.stringify(m))

					if(monnum1 > m.monnum || monnum1 == '')
						monnum1 = m.monnum;
					if(monnum2 < m.monnum || monnum2 == '')
						monnum2 = m.monnum;
					if(indexOfArray(mans, m.uname) < 0)
						mans.push(m.uname)
					cnt.receivable += round2(m.receivable, 3);
					cnt.payable += round2(m.payable, 3);
					cnt.profit += round2(m.profit, 3);
					cnt.samout += round2(m.samout, 3);
				}

				cnt.name = mans.join(',')
				//console.log("学习型:"+ cnt.name)
				if(monnum1 != '' && monnum1 == monnum2)
					cnt.dstr = '在' + monnum1 + "月份";
				else if(monnum1 == "" && monnum2 != "")
					cnt.dstr = "截至" + monnum2 + "月份";
				else if(monnum1 != "" && monnum2 == "")
					cnt.dstr = "从" + monnum1 + "月份开始";
				else if(monnum1 != "" && monnum2 != "")
					cnt.dstr = monnum1 + "-" + monnum2 + "月份"
				var card = G('info_div');
				//	console.log(JSON.stringify(cnt))
				//console.log(template('card_tpl', cnt))
				card.innerHTML = template('card_tpl', cnt);
			}
			//-----------刷新查询结果-------------
			function refresh() {
				var table = document.body.querySelector('.mui-table-view');
				table.innerHTML = ''
				var qrs = queryList();
				pullRefresh(qrs);
				//刷新滚动到顶部
				mui('#offCanvasContentScroll').scroll().scrollTo(0, 0, 100);
				//	console.log('dddd');
			}

			//---------页面准备-----------
		</script>
	</body>

</html>